<template>
  <div>
    <div class="app-container calendar-list-container">
      <el-row>
        <el-col :span="24">
          <div>
            <TableFrom
              :list="table.list"
              @handleSelectionChange="handleSelectionChange"
              :options="options"
              :columns="table.columns"
              :operates="operates"
              :formItems="formItems"
              :tabFrom="tabFrom"
              :pagination="pagination"
              ref="landingPageLog"
              @submit="handleSubmit"
              @batchSubmit="batchDataClick"
              @handleSizeChange="handleSizeChange"
              @handleCurrentChange="handleCurrentChange"
              @custom="customArr"
            >
            </TableFrom>
          </div>
        </el-col>
      </el-row>
    </div>
    <div id="product">
      <CustomColumn
        :show.sync="showCustomColumn"
        localName="landingPageLogForm"
        :baseColumns="columns"
        :defaultColumns="defaultColumns"
        :columns.sync="table.columns"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'logTab',
  data() {
    return {
      showCustomColumn: false,
      table: {
        list: [],
        columns: []
      },

      formItems: [
        {
          lable: '',
          type: 'daterange',
          key: 'dateTime',
          placeholder: '请选择日期',
          defaultValue: 0,
          rules: [],
          style: { width: '300px' }
        },
        {
          lable: '链接:',
          type: 'input',
          key: 'landingPageUrl',
          placeholder: '落地页拨测的链接地址',
          style: { width: '300px' }
        },
        {
          lable: '拨测状态:',
          type: 'dropDown',
          key: 'status',
          placeholder: '拨测状态',
          style: { width: '120px' },
          clearable: true,
          option: [
            {
              label: '正常',
              value: 0
            },
            {
              label: '异常',
              value: 1
            }
          ]
        }
      ],

      list: [], // table数据
      listParm: {
        page: 1,
        size: 10,
        start: '',
        end: '',
        landingPageUrl: ''
      },
      options: {
        stripe: true, // 是否为斑马纹 table
        highlightCurrentRow: true, // 是否支持当前行高亮显示
        indexList: true,
        page: true
      }, // table 的参数
      //表头操作
      tabFrom: {
        selectButton: true, //是否展示查询按钮
        resetting: true, //是否展示重置按钮
        custom: true
      },
      pagination: {
        currentPage: 1,
        pageSize: 10,
        totalCount: 0
      },
      defaultColumns: [],
      columns: [
        {
          key: 'landingPageUrl',
          label: '链接',
          align: 'center',
          prop: 'landingPageUrl'
        },
        {
          key: 'monitorClass',
          label: '监测点',
          align: 'center',
          prop: 'monitorClass'
        },
        {
          key: 'status',
          label: '执行状态',
          align: 'center',
          prop: 'status',
          render: (h, params) => {
            const { buttonName, buttonType } = this.getButtonInfo(
              params.row.status
            );

            return h(
              'el-button',
              {
                props: {
                  type: buttonType
                },
                on: {
                  click: () => {
                    /* 按钮点击事件处理逻辑 */
                  }
                }
              },
              buttonName
            );
          }
        },
        {
          key: 'errorMsg',
          label: '异常信息',
          align: 'center',
          prop: 'errorMsg'
        },
        {
          key: 'createTime',
          label: '拨测时间',
          align: 'center',
          prop: 'createTime'
        },
        {
          key: 'whiteScreenTime',
          label: '白屏时间',
          align: 'center',
          prop: 'whiteScreenTime',
          formatter: (row, col, cellVaule) => {
            return row.whiteScreenTime + 'ms';
          }
        },
        {
          key: 'totalTime',
          label: '总耗时',
          align: 'center',
          prop: 'totalTime',
          formatter: (row, col, cellVaule) => {
            return row.totalTime + 'ms';
          }
        }
      ], // 需要展示的列

      operates: {
        width: 150,
        list: []
      } // 列操作按钮
    };
  },
  mounted: function() {
    var _this = this;
    _this.listParm = this.$refs.landingPageLog.defaultDateTime(0);
    this.getList(1, this.pagination.pageSize);
    window.bus.$on('blogTableReload', function() {
      _this.getList(_this.pagination.currentPage, _this.pagination.pageSize);
    });
  },
  methods: {
    getButtonInfo(status) {
      let buttonName = '';
      let buttonType = '';

      switch (status) {
        case 0:
          buttonName = '正常';
          buttonType = 'success';
          break;
        case 1:
          buttonName = '异常';
          buttonType = 'danger';
          break;
        // 其他状态的处理逻辑
        default:
          break;
      }

      return { buttonName, buttonType };
    },
    customArr(val) {
      this.showCustomColumn = true;
    },
    search() {
      this.getList(1, this.pagination.pageSize);
    },
    handleSubmit(formDataInfo) {
      var _this = this;
      _this.listParm = formDataInfo;
      _this.getList(1, this.pagination.pageSize);
    },

    async getList(page, size) {
      var _this = this;
      if (page) _this.listParm.page = page;
      if (size) _this.listParm.size = size;
      let res = await this.$api.logApi.landingPageResultList(_this.listParm, {
        loadingTime: 100,
        loadingText: '数据加载中...'
      });
      if (res) {
        this.table.list = res.records;
        this.pagination.currentPage = res.current;
        this.pagination.totalCount = res.total;
      }
    },
    handleSizeChange(val) {
      this.listParm.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listParm.page = val;
      this.getList();
    }
  }
};
</script>
